<template>
  <div class="home">
    <!--外层容器-->
    <el-container>
        <!--上半区域-->
      <el-header class="layout-header">
        <h1>酷鲨商城运营管理平台</h1>
      </el-header>
      <!--下半区域-->
      <el-container class="layout-body">
          <!--下半区域的左侧-->
        <el-aside width="300px" class="layout-aside">
          <el-menu
                  router
                  :default-active="$router.currentRoute.path"
                  class="el-menu-vertical-demo"
                  background-color="#222C32"
                  text-color="#fff"
                  active-text-color="#fff">
            <el-menu-item index="/sys-admin/index">
              <i class="el-icon-s-home" ></i>
              <span>首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-tools" ></i>
                <span>临时页面</span>
              </template>
              <el-menu-item index="/sys-admin/admin/add-new">
                <i class="el-icon-circle-plus" ></i>
                <span>添加管理成员</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/admin/list">
                <i class="el-icon-s-operation" ></i>
                <span>管理员列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/brand/add-new">
                <i class="el-icon-circle-plus" ></i>
                <span>添加品牌</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/brands">
                <i class="el-icon-s-operation" ></i>
                <span>品牌列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/categories/add-new">
                <i class="el-icon-circle-plus" ></i>
                <span>添加类别</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/categories">
                <i class="el-icon-s-operation" ></i>
                <span>类别列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/album/add-new">
                <i class="el-icon-circle-plus" ></i>
                <span>添加相册</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/albums">
                <i class="el-icon-s-operation" ></i>
                <span>相册列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/attribute-template/add-new">
                <i class="el-icon-circle-plus" ></i>
                <span>添加属性模板</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/attribute-template">
                <i class="el-icon-s-operation" ></i>
                <span>属性模板列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/attributes/add-new">
                <i class="el-icon-circle-plus" ></i>
                <span>添加属性</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/attributes">
                <i class="el-icon-s-operation" ></i>
                <span>属性列表</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-goods" ></i>
                <span>商品管理</span>
              </template>
              <el-menu-item index="2-1">
                <i class="el-icon-s-grid" ></i>
                <span>SPU台账</span>
              </el-menu-item>
              <el-menu-item index="2-2">
                <i class="el-icon-circle-plus" ></i>
                <span>新增SPU</span>
              </el-menu-item>
              <el-menu-item index="2-3">
                <i class="el-icon-picture" ></i>
                <span>相册管理</span>
              </el-menu-item>
              <el-menu-item index="2-4">
                <i class="el-icon-s-unfold" ></i>
                <span>商品类别</span>
              </el-menu-item>
              <el-menu-item index="2-5">
                <i class="el-icon-s-flag" ></i>
                <span>品牌管理</span>
              </el-menu-item>
              <el-menu-item index="2-6">
                <i class="el-icon-s-data" ></i>
                <span>类别列表</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>订单管理</span>
              </template>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-ticket"></i>
                <span slot="title">营销管理</span>
              </template>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span slot="title">商家管理</span>
              </template>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span slot="title">权限管理</span>
              </template>
            </el-submenu>

          </el-menu>
        </el-aside>
          <!--下半区域的右侧-->
        <el-main class="layout-main">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<style>

  .layout-header{
    background-color: #1684B0;
  }
  .layout-header h1{
    color: white;
    line-height: 60px;
  }

  .layout-body{

    position: absolute;
    top:60PX;
    bottom: 0;
    left: 0;
    right: 0;

  }
  .layout-aside{
    background: #222C32;
  }
  .layout-aside i{
    color: #fff !important;
  }
  .layout-main{
    background: #fff;
  }
  .el-menu-item.is-active{
    background: #2d3c4d !important;
  }
</style>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>
